<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>

    <style>
		[ui5-avatar] img {
			object-fit: contain;
		}
	</style>
</head>

<body style="background-color: var(--sapBackgroundColor)">
    <!-- playground-fold-end -->

    <ui5-list selection-mode="Multiple">
        <ui5-li-group header-text="Front End Developers">
            <ui5-li icon="navigation-right-arrow" icon-end>Jennifer
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/woman_avatar_3.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
            <ui5-li icon="navigation-right-arrow" icon-end>Lora
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/woman_avatar_4.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
            <ui5-li icon="navigation-right-arrow" icon-end>Carlotta
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/woman_avatar_5.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
        </ui5-li-group>

        <ui5-li-group header-text="Back End Developers">
            <ui5-li icon="navigation-right-arrow" icon-end>Clark
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/man_avatar_1.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
            <ui5-li icon="navigation-right-arrow" icon-end>Ellen
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/woman_avatar_1.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
            <ui5-li icon="navigation-right-arrow" icon-end>Adam
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/man_avatar_2.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
        </ui5-li-group>

        <ui5-li-group>
            <div style="width: '100%'; display: flex; justify-content:space-between; align-items:center;" slot="header">
                <span>Back End Developers</span>
                <ui5-icon name="navigation-right-arrow"></ui5-icon>
            </div>
            <ui5-li icon="navigation-right-arrow" icon-end>Ellen
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/woman_avatar_1.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
            <ui5-li icon="navigation-right-arrow" icon-end>Adam
                <ui5-avatar slot="image" shape="Square">
                    <img src="../assets/images/avatars/man_avatar_2.png" alt="Woman image">
                </ui5-avatar>
            </ui5-li>
        </ui5-li-group>
    </ui5-list>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
